<template>
    <view class="product-page">
      <!-- 搜索栏 -->
      <view class="search-bar">
        <!-- <nut-searchbar placeholder="搜索商品"></nut-searchbar> -->
        <myInput v-model="searchTxt" @search="handleSearch" />
      </view>
  
      <!-- 分类标签 -->
      <view class="category-tabs">
        <nut-tabs v-model="activeTab">
          <nut-tab-pane :title="cate.name" v-for="cate in cates" :key="cate.id">
            <view class="product-grid">
              <view
                class="product-item"
                v-for="item in products"
                :key="item.id"
                @click="goToDetail(item.id)"
              >
                <image
                  class="product-image"
                  :src="item.image"
                  mode="aspectFill"
                ></image>
                <view class="product-info">
                  <text class="product-title">{{ item.name }}</text>
                  <text class="product-desc">{{ item.desc }}</text>
                  <view class="price-row">
                    <text class="price">¥{{ item.price }}</text>
                    <text class="sold">已售{{ item.sold }}</text>
                  </view>
                </view>
              </view>
            </view>
          </nut-tab-pane>
          <!-- <nut-tab-pane title="白酒"></nut-tab-pane>
          <nut-tab-pane title="果酒"></nut-tab-pane>
          <nut-tab-pane title="礼盒"></nut-tab-pane> -->
        </nut-tabs>
      </view>
  
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref } from "vue";
  import Taro from "@tarojs/taro";
  const pic = "https://cdn.tjkximg.com/content/zhangtang/images/mtjx.jpg";
  import myInput from "@/components/my-input/index.vue";
  
  Taro.setNavigationBarTitle({
    title: '订单列表'
  })
  
  const searchTxt = ref("");
  const cates = ref([
    {
      id: 0,
      name: "全部",
    },
    {
      id: 1,
      name: "待付款",
    },
    {
      id: 2,
      name: "待核销",
    },
    {
      id: 3,
      name: "已完成",
    },
  ]);
  
  function handleSearch() {
    console.log("searchTxt", searchTxt.value);
  }
  
  interface Product {
    id: number;
    name: string;
    desc: string;
    price: number;
    sold: number;
    image: string;
  }
  
  const activeTab = ref(0);
  const products = ref<Product[]>(
    [1, 2, 3, 4, 5, 6, 7, 8].map((i) => {
      return {
        id: i,
        name: `醉义堂20年窖藏酒商品${i}`,
        desc: `商品${i}的描述纯粮酿醉义堂20年窖藏酒醉义堂20年窖藏酒香型白酒`,
        price: Math.floor(Math.random() * 1000),
        sold: Math.floor(Math.random() * 1000),
        image: pic,
      };
    })
  );
  
  function goToDetail(id: number) {
    Taro.navigateTo({
      url: `/pages-detail/detail/index?id=${id}`,
    });
  }
  </script>
  
  <style lang="scss">
  .product-page {
    padding-bottom: 200rpx;
    background-color: #f5f5f5;
  
    .search-bar {
      padding: 20rpx;
      background-color: #fff;
    }
  
    .category-tabs {
      background-color: #fff;
      margin-bottom: 20rpx;
    }
  
    .product-grid {
      display: flex;
      flex-wrap: wrap;
      padding: 0 10rpx;
      box-sizing: border-box;
  
      .product-item {
        width: 50%;
        padding: 10rpx;
        box-sizing: border-box;
  
        .product-image {
          width: 100%;
          height: 350rpx;
          border-radius: 16rpx 16rpx 0 0;
        }
  
        .product-info {
          background-color: #fff;
          padding: 20rpx;
          border-radius: 0 0 16rpx 16rpx;
  
          .product-title {
            font-size: 28rpx;
            font-weight: 500;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 40rpx;
          }
  
          .product-desc {
            font-size: 24rpx;
            color: #999;
            margin: 10rpx 0;
            display: block;
            line-height: 34rpx;
          }
  
          .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 16rpx;
  
            .price {
              color: #f2270c;
              font-weight: 500;
              font-size: 32rpx;
            }
  
            .sold {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
    }
  }
  .nut-tab-pane{
    padding: 12rpx;
  }
  </style>
  